<template>
  <div class="home">
    <div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
      <titleCustom :title="$route.meta.title" :backUrl="'/seatInformation'"></titleCustom>
    </div>
    <div class="promptClass">
      座席绑定号码将用于接听客户来电，请确保绑定的号码是您本人使用！
    </div>
    <div class="formDataClass">
      <div class="dataItem">
        <div style="width: 30%;">绑定类型</div>
        <div class="checkClass" style="width: 70%;">
          <div class="checkItem">
            <div :class="select==0?'checkbox1':'checkbox'" @click="selectIndex(0)"></div>
            <div>IP电话</div>
          </div>
          <div class="checkItem" style="margin-left: 10px;">
            <div :class="select==1?'checkbox1':'checkbox'" @click="selectIndex(1)"></div>
            <div>手机</div>
          </div>
        </div>
      </div>
      <div class="dataItem">
        <div style="width: 30%;">座席绑定号码</div>
        <input v-model="tel" placeholder="请输入号码" placeholder-class="input-placeholder"
          style="text-align: right;width: 70%;" />
      </div>
      <div class="dataItem" v-if="select==1">
        <div style="width: 30%;">验证码</div>
        <div style="display: flex;flex-direction: row;align-items: center;width: 70%;justify-content: flex-end;">
          <input v-model="code" placeholder="请输入验证码" placeholder-class="input-placeholder" style="text-align: right;width: 100px;" />
          <div :class="codeShow?'codeClass1':'codeClass'" @click="codeShow?'':codeChange()">
            {{codeShow?codeTime+'s':'验证码'}}
          </div>
        </div>
      </div>
    </div>
    <div class="buttomClass" @click="submit">确定</div>

    <div class="popupClass" v-if="show&&telList.length>0">
      <div class="popupTitle">座席绑定号码</div>
      <div class="phoneItem" v-for="(item,index) in telList" :key="index">
        <div class="phoneNumberClass">
          {{ item.tel }}
          <span style="color: #feca59;" v-if="item.telType==1">固话</span>
          <span style="color: #feca59;" v-if="item.telType==2">手机</span>
          <span style="color: #feca59;" v-if="item.telType==3">IP话机</span>
          <span style="color: #feca59;" v-if="item.telType==4">软电话</span>
        </div>
        <div style="line-height: 20px;display: flex;flex-direction: row;align-items: center;">
          <div :style="item.isBind==1?'color:#f87775;':'color: #66a3fe;'" @click="update(item)">
            {{item.isBind==1?'解绑':'绑定'}}
          </div>
          <div style="color: #66a3fe;margin-left: 10px;" @click="deletePhone(item)">删除</div>
        </div>
      </div>
      <div style="height: 50px;"></div>
    </div>
    <div class="popupClass" v-if="show&&telList.length==0">
      <div class="popupTitle">当前座席暂未绑定号码</div>
      <div style="height: 50px;"></div>
    </div>
  </div>
</template>
<script>
  import {
    Toast,
    Dialog,
    Notify
  } from 'vant'
  import titleCustom from '@/components/titleCustom/title'
  import aiccSeatApi from '@/apiaicc/aiccSeatApi'
  import aiccSmsApi from '@/apiaicc/aiccSmsApi'
  export default {
    components: {
      titleCustom,
      Toast,
      Dialog,
      Notify
    },
    data() {
      return {
        show: false,
        code: '',
        tel: '',
        //座席详情
        seatInfo: [],
        //绑定手机列表
        telList: [],
        select: 0,
        codeShow: false,
        codeTime: 60,
        codeInver: null
      }
    },
    mounted() {
      this.getSeatInfo()
      this.showTels()
    },
    methods: {
      getSeatInfo() {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccSeatApi.getSeatDetail({}).then((res) => {
          Toast.clear()
          console.log('getSeatInfo', res)
          if (res.code == 0) {
            this.seatInfo = res.data
          } else {}
        })
      },
      codeChange() {
        let that = this
        if (that.tel === "" || that.tel === null) {
          Dialog.alert({
            title: '',
            message: '号码不能为空'
          }).then(() => {
            // on close
          })
          return
        } else {
          if (!that.validMobile(that.tel)) {
            Dialog.alert({
              title: '',
              message: '号码不正确'
            }).then(() => {
              // on close
            })
            return
          }
        }

        for (var i = 0; i < that.telList.length; i++) {
          if (that.tel === that.telList[i].tel) {
            Dialog.alert({
              title: '',
              message: '当前绑定号码已存在绑定记录，可通过绑定记录执行绑定'
            }).then(() => {
              // on close
            })
            return;
          }
        }

        if (that.select == 1) { //手机
          for (var i = 0; i < that.telList.length; i++) {
            if ((1 === that.telList[i].telType||2 === that.telList[i].telType)
            &&that.tel != that.telList[i].tel) {
              Dialog.alert({
                title: '',
                message: '每个座席只支持绑定一个手机类型的号码，若要变更请先删除手机类型的绑定记录'
              }).then(() => {
                // on close
              })
              return;
            }
          }
        }else{//话机
          for (var i = 0; i < that.telList.length; i++) {
            if (3 === that.telList[i].telType&&that.tel != that.telList[i].tel) {
              Dialog.alert({
                title: '',
                message: '每个座席只支持绑定一个IP电话类型的号码，若要变更请先删除IP电话类型的绑定记录'
              }).then(() => {
                // on close
              })
              return;
            }
          }
        }

        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccSmsApi.sendcode(that.tel).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            that.codeShow = true
            that.codeInver = setInterval(function() {
              that.codeTime--
              if (that.codeTime == 0) {
                clearInterval(that.codeInver)
                that.codeShow = false
                that.codeTime = 60
              }
            }, 1000);
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })

      },
      //座席电话列表
      showTels() {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccSeatApi.getSeatTels({}).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            this.telList = res.data
            this.show = true
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })
      },
      /**
       * 解绑/绑定
       * @param {} item
       */
      update(item) {
        if (item.isBind == 1) {
          //解绑
          this.unBindTel(item)
        } else {
          //绑定
          this.bindTel(item)
        }
      },
      //解绑
      unBindTel() {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccSeatApi.unBindClientTel({
          satoken: localStorage.getItem('token')
        }).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '解绑成功'
            })
            this.$router.push('/seatInformation')
            this.show = false
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })
      },
      //绑定
      bindTel(item) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        console.log('bindTel', item);
        let bindType = (item.telType == 1 || item.telType == 2) ? 1 : 2
        aiccSeatApi.bindClientTel({
          "bindTel": item.tel,
          "code": "",
          "needCode": 0,
          "bindType": bindType
        }).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '绑定成功'
            })
            this.$router.push('/seatInformation')
            this.show = false
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })
      },
      /**
       * 删除
       */
      deletePhone(item) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccSeatApi.delClientTel({
          "delTel": item.tel
        }).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            this.$router.push('/seatInformation')
            Notify({
              type: 'success',
              message: '删除成功'
            })
            this.show = false
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })
      },
      selectIndex(index) {
        this.select = index
      },
      submit() {
        if (this.tel === "" || this.tel === null) {
          Dialog.alert({
            title: '',
            message: '号码不能为空'
          }).then(() => {
            // on close
          })
          return
        } else {
          if (this.tel === this.seatInfo.bindTel) {
            Dialog.alert({
              title: '',
              message: '当前座席已绑定该号码，请勿重复绑定'
            }).then(() => {
              // on close
            })
            return;
          }

          if (this.select == 1) { //手机
            if (!this.validMobile(this.tel)) {
              Dialog.alert({
                title: '',
                message: '手机号不正确'
              }).then(() => {
                // on close
              })
              return
            }
          } else { //话机
            if (!this.validNumber(this.tel)) {
              Dialog.alert({
                title: '',
                message: 'IP号码只能是数字'
              }).then(() => {
                // on close
              })
              return
            }
          }

        }
        if (this.select == 1 && (this.code === "" || this.code === null)) {
          Dialog.alert({
            title: '',
            message: '验证码不能为空'
          }).then(() => {
            // on close
          })
          return
        }



        if (this.select == 1) { //手机
          for (var i = 0; i < this.telList.length; i++) {
            if ((1 === this.telList[i].telType||2 === this.telList[i].telType)
            &&this.tel != this.telList[i].tel) {
              Dialog.alert({
                title: '',
                message: '每个座席只支持绑定一个手机类型的号码，若要变更请先删除手机类型的绑定记录'
              }).then(() => {
                // on close
              })
              return;
            }
          }
        }else{//话机
          for (var i = 0; i < this.telList.length; i++) {
            if (3 === this.telList[i].telType&&this.tel != this.telList[i].tel) {
              Dialog.alert({
                title: '',
                message: '每个座席只支持绑定一个IP电话类型的号码，若要变更请先删除IP电话类型的绑定记录'
              }).then(() => {
                // on close
              })
              return;
            }
          }
        }

        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccSeatApi.bindClientTel({
          "bindTel": this.tel,
          "code": this.code,
          "needCode": this.select,
          "bindType": this.select == 0 ? 2 : 1
        }).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '绑定成功'
            })
            setTimeout(() => {
              this.$router.go(-1)
            }, 1500);
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })


      },
      validNumber(str) {
        return /^0|[1-9][0-9]*$/.test(str);
      },
      validMobile(str) {
        return /^1[3456789]\d{9}$/.test(str)
      }

    }
  };
</script>
<style scoped>
  .home {
    background-color: #f2f2f2;
    height: calc(100vh - 60px);
    width: 100%;
    font-size: 14px;
    padding-top: 60px;
  }

  .promptClass {
    width: 100%;
    height: 80px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 20px;
    font-weight: 600;
    color: #898989;
  }

  .formDataClass {
    width: 100vw;
    background-color: #fff;
    height: auto;
  }

  .dataItem {
    display: flex;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .checkClass {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .checkbox {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #898989;
    margin: 0 15px;
    box-sizing: border-box;
  }

  .checkbox1 {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 15px;
    background-color: #1684fc;
  }

  .checkItem {
    display: flex;
    flex-direction: row;
  }

  .input-placeholder {
    text-align: right;

  }

  .buttomClass {
    width: 80vw;
    height: 45px;
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #2782d7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

  }

  .noti {
    position: fixed;
    top: 60px;
    width: 100%;
  }

  .popupClass {
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    right: 0;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
  }

  .popupTitle {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phoneItem {
    width: 90%;
    background-color: #f9fafc;
    height: 60px;
    margin-bottom: 15px;
    margin-left: 5%;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .phoneNumberClass {
    font-size: 15px;
    font-weight: 600;

  }

  .codeClass {
    width: 70px;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    background-color: #1684fc;
    color: #fff;
    margin-left: 10px;
  }

  .codeClass1 {
    width: 70px;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    background-color: #bababa;
    border: 1px solid #bababa;
    color: #fff;
    margin-left: 10px;
  }
</style>
